<template>
	<view class="content">
		<view class="bgc">
			<view class="zuo">
				<p>本月学习课时</p>
				<text>{{detail.monthUseClassHour||'--'}}课时</text>
			</view>
			<view class="you">
				<p>所有已学习课时</p>
				<text>{{detail.useClassHour||'--'}}课时</text>
			</view>
		</view>
		<view class="xinxi">
			<view class="course">
				<view class="icon">
					课程信息
				</view>
				<view class="first">

					<text style="margin-right: 87rpx;">课程ID：{{detail.code||'--'}}</text>
					<text style="margin-right: 87rpx;">辅导科目：{{detail.counsellingSubjectName||'--'}}</text>


				</view>
				<view class="first" style="margin-top: 40rpx;">
					<text style="margin-right: 140rpx;">年级：{{detail.studyGradeName||'--'}}</text>

					<text>学生性别：{{detail.gender==1?'男':'女'}}</text>
				</view>
			</view>
		</view>
		<view style="padding: 0 30rpx;position: relative;">

			<view class="introduce" @tap="doDetail">
				<view class="icon">
					授课老师
				</view>
				<view class="left">
					<u-avatar style="margin-right: 28rpx;" size="131"
						:src="detail.educationOrderApplyVOList[0].teacherVO.bareheadedPhoto"></u-avatar>
					<view class="name">
						<view class="user">
							<text style="font-weight: bold;font-size: 34rpx;
	color: #333333;">{{detail.educationOrderApplyVOList[0].teacherVO.realName||'--'}}</text>
							<image v-if="detail.educationOrderApplyVOList[0].teacherVO.gender==2" style="width: 31rpx;
				
				height: 31rpx;margin: 0 19rpx 0 25rpx; vertical-align: middle;" src="/static/image/women.png" mode="">
							</image>
							<image v-if="detail.educationOrderApplyVOList[0].teacherVO.gender==1" style="width: 31rpx;
				
				height: 31rpx;margin: 0 19rpx 0 25rpx; vertical-align: middle;" src="/static/image/man.png" mode="">
							</image>
							<text style="font-size: 26rpx;color: #444444;
	">{{detail.educationOrderApplyVOList[0].teacherVO.categoryList[0].categoryName||'--'}}</text>
						</view>
						<p>ID：{{detail.educationOrderApplyVOList[0].teacherVO.code||'--'}}</p>
					</view>
				</view>
				<view class="right">
					<view class="img" style="margin-bottom: 40rpx;">
						<image style="margin-right: 7rpx;width: 25rpx;
						height: 25rpx" src="/static/image/rz.png" mode=""></image>
						<text>{{detail.educationOrderApplyVOList[0].teacherVO.certification?'已认证':'未认证'}}</text>
					</view>
					<view class="img">
						<image style="width: 15rpx;
						height: 19rpx; margin-right: 10rpx;" src="../../static/image/address.png" mode=""></image>
						<text style="font-size: 26rpx;color: #333333;">{{detail.distance}}</text>
					</view>
				</view>
			</view>
			<view class="tuike" @tap="tui">
				<text>申请退课</text>
			</view>
		</view>
		<view class="type">
			<view class="box">
				<view style="height: 110rpx; border-bottom: 2rpx solid #E5E5E5;padding: 20rpx 30rpx;">
					<u-tabs active-color="#FF6E56" inactive-color="#333333" :list="list" :is-scroll="false"
						:current="current" @change="change"></u-tabs>
				</view>
				<view v-if="current===0">
					<view class="fankui">
						<view class="fankui-item" v-for="(item,index) in detail.courseFeedbackList" :key="index">
							<view class="">
								<h5>第{{index+1}}堂课-{{detail.courseType==1?'试听':'正式'}}课程反馈</h5>
								<p class="time">授课时间:{{item.teachTimeStart}}</p>
							</view>
							<view class="see" @tap="goFankui(item.id,detail)">
								查看
							</view>
						</view>
					</view>
				</view>
				<view v-if="current===1">
					<view class="fankui">
						<view class="fankui-item" v-for="(item,index) in detail.courseFeedbackList" :key="index">
							<view class="">
								<h5>扣除课时费 {{item.classHour}}</h5>
								<p class="time">授课时间: {{item.createTime}}</p>
							</view>
						</view>
					</view>
				</view>
				<view v-if="current===2">
					<view class="table" style="padding: 0 20rpx; margin-top: 40rpx;">
						<u-table padding="30rpx">
							<u-tr class="u-tr">
								<u-th class="u-th">购课时间</u-th>
								<u-th class="u-th">购课课时</u-th>
								<u-th class="u-th">购课金额</u-th>
							</u-tr>
							<u-tr class="u-tr" v-for="item in detail.educationOrderList">
								<u-td class="u-td">{{item.payTime}}</u-td>
								<u-td class="u-td">{{item.classHour}}</u-td>
								<u-td class="u-td">{{item.totalAmount}}</u-td>
							</u-tr>
						</u-table>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="center" border-radius="10">
			<view class="warp">
				<view class="tui">
					<view class="keshi" style="margin-bottom: 58rpx;">
						<text>退课课时</text>
						<view class="" style="width: 357rpx;
height: 73rpx;
background: #FFFFFF;
border: 1px solid #DCDCDC;
border-radius: 10rpx;margin-left: 35rpx;padding-left: 26rpx;">
							<u-input v-model="refHour" type="number" :border="false" :placeholder="placeholder"/>
						</view>

					</view>
					<text style="font-size: 30rpx;color: #333333;">退课金额 = 自动计算课时 × 次数</text>
					<view class="" style="font-size: 30rpx;color: #333333;margin-top: 30rpx;">
						本次退费金额：
					</view>
					<!-- 					<view class="keshi">
						<text>总课次:{{tuike.classNumber}}</text>
					</view>
					<view class="keshi">
						<text>单次课时:{{tuike.classHour}}</text>
					</view>
					<view class="keshi">
						<text>课时单价:{{tuike.salary}}</text>
					</view>
					<view class="keshi">
						<text>已用课时:{{tuike.useHour}}</text>
					</view>
					<view class="keshi">
						<text>退课课时:{{tuike.refHour}}</text>
					</view>
					<view class="keshi">
						<text>退课金额:{{tuike.amount}}</text>
					</view> -->
					<view class="yuanyin" style="margin-top: 50rpx;">
						<u-input :clearable="false" v-model="value" type="textarea" :border="border" />
					</view>
					<view class="sub">
						<view class="tijao" @tap="sub">
							提交
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '课程反馈'
				}, {
					name: '消课记录'
				}, {
					name: '购课记录',
				}],
				current: 0,
				show: false,
				value: '',
				refHour: '',
				id: '',
				detail: {},
				tuike: {},
				placeholder:''
			};
		},
		onLoad(options) {
			uni.showLoading({
				title: '加载中'
			})

			this.id = options.id
			this.getDetail()
			setTimeout(function() {
				uni.hideLoading();
			}, 2000);
		},
		methods: {
			doDetail() {
				uni.navigateTo({
					url: `/pages/contradict/teacherDetail?teacherId=${this.detail.teacherVO.id}`
				})
			},
			change(index) {
				this.current = index;
			},
			goFankui(id, teacherDetail) {
				console.log(teacherDetail);
				uni.navigateTo({
					url: `/pages/invent/courseDes?backId=${id}&id=${this.id}`
				})
			},
			// async getFankui(){
			// 	const res = await this.$u.api.getFankui({backId:'this.id'})
			// },
			async getDetail() {
				this.detail = await this.$u.api.getOrderDetail({
					id: this.id
				})
				if (this.detail.distance >= 1000) {
					this.detail.distance = (this.detail.distance / 1000).toFixed(2) + 'km'
				} else if (this.detail.distance < 1000) {
					this.detail.distance = this.detail.distance + 'm'
				}
			},
			async tui() {
				this.tuike = await this.$u.api.backClass({
					orderId: this.id
				})
				let num=Number(this.tuike.sumHour-this.tuike.useHour)
				this.placeholder='最多支持输入'+num+'课时'
				this.refHour=''
				this.show = true
			},
			async sub() {
				if (this.refHour > 0 &&Number(this.refHour)<= Number(this.tuike.sumHour-this.tuike.useHour)) {
					const ress = await this.$u.api.getTuike({
						orderId: this.id,
						reason: this.value,
						refHour: this.refHour	
					})
					this.$u.toast('提交成功,请等待管理员审核')
					this.show=false
					this.refHour=''
				}else{
					this.$u.toast('退课课时必须要小于或等于剩余课时')
				}

			}
		}
	}
</script>

<style lang="scss">
	/deep/.u-tab-bar {
		bottom: -12rpx !important;
		width: 156rpx !important;
		left: -58rpx;
	}

	/deep/.u-scroll-view {
		height: 87rpx;
	}

	.u-tr {
		background-color: #feefea !important;
		text-align: center;
		// width: 650rpx !important;
	}

	/deep/.u-td {
		font-size: 28rpx !important;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333 !important;

		&:nth-child(2) {
			view {
				padding: 48rpx !important;
			}
		}

		&:nth-child(3) {
			view {
				padding: 48rpx !important;
			}
		}

		// padding: 12rpx !important;
	}

	.u-th {
		background-color: #feefea !important;
		text-align: center;
		font-size: 24rpx !important;
		color: #605F5F;
		font-weight: 500 !important;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

		.tui {
			width: 655rpx;
			height: 1139rpx;
			background-image: url('https://xiyanluo.oss-cn-beijing.aliyuncs.com/%E8%8D%94%E8%87%B4%E5%AE%B6%E6%95%99/%E6%9A%82%E6%97%A0%E6%8F%90%E7%8E%B0%E8%AE%B0%E5%BD%95%403x.png');
			background-size: cover;
			background-repeat: no-repeat;
			padding: 430rpx 73rpx 0;

			.keshi {
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.shi {
					padding-left: 25rpx;
					width: 357rpx;
					height: 73rpx;
					background: #FFFFFF;
					border: 1px solid #DCDCDC;
					border-radius: 10rpx;
				}

			}

			.jine {
				margin-top: 58rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.tuifei {
				margin-top: 58rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			/deep/.u-input__textarea {
				width: 509rpx !important;
				height: 217rpx !important;
				background: #EEEEEE;
				border-radius: 10rpx;
				padding-left: 54rpx !important;
				padding-top: 25rpx !important;
			}

			.sub {
				margin-top: 35rpx;
				display: flex;
				justify-content: center;

				.tijao {
					width: 235rpx;
					height: 80rpx;
					background: #FFFFFF;
					border: 1px solid #FF7157;
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: bold;
					line-height: 80rpx;
					text-align: center;
					border-radius: 40rpx;
					color: #FF6C56;
				}
			}
		}
	}

	.content {

		// padding: 50rpx 30rpx 0;
		.tuike {
			position: absolute;
			bottom: -80rpx;
			right: 34rpx;
			width: 140rpx;
			height: 43rpx;
			background: #FFFFFF;
			border: 1px solid #FF7157;
			border-radius: 22rpx;
			// line-height: 43rpx;
			text-align: center;
			justify-content: end;

			text {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FF7157;
			}
		}

		.bgc {
			display: flex;
			align-items: center;
			margin-top: 40rpx;
			padding-left: 30rpx;

			.zuo {
				width: 352rpx;
				height: 207rpx;
				background-repeat: no-repeat;
				background-size: cover;
				background-image: url('https://xiyanluo.oss-cn-beijing.aliyuncs.com/%E8%8D%94%E8%87%B4%E5%AE%B6%E6%95%99/%E6%8A%95%E8%AF%89%E5%BB%BA%E8%AE%AE%403x.png');
				padding: 60rpx 15rpx 0;

				p {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #F3684C;
					margin-bottom: 30rpx;
				}

				text {
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #F1654A;
				}


			}

			.you {
				width: 356rpx;
				height: 199rpx;
				background-repeat: no-repeat;
				background-size: cover;
				background-image: url('https://xiyanluo.oss-cn-beijing.aliyuncs.com/%E8%8D%94%E8%87%B4%E5%AE%B6%E6%95%99/%E8%89%B2%E7%9B%B8%EF%BC%8F%E9%A5%B1%E5%92%8C%E5%BA%A6%201%403x.png');
				padding: 60rpx 15rpx 0;

				p {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #6E7EFD;
					margin-bottom: 30rpx;
				}

				text {
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #6A85F4;
				}
			}
		}

		.icon {
			position: absolute;
			top: -32rpx;
			left: 0;
			width: 164rpx;
			height: 55rpx;
			text-align: center;
			line-height: 55rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FF6B55;
			background-size: contain;
			background-repeat: no-repeat;
			background-image: url('');
		}

		.xinxi {
			margin-top: 92rpx;
			padding: 0 30rpx;

			.course {
				padding-left: 79rpx;
				padding-top: 67rpx;
				position: relative;
				height: 224rpx;
				background: #FFFFFF;
				border: 1px solid #EEEEEE;
				box-shadow: 0rpx 4rpx 27rpx 0rpx rgba(141, 141, 141, 0.14);
				border-radius: 20rpx;

				.first {
					display: flex;
					align-items: center;

					text {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
					}
				}


			}
		}

		.introduce {
			position: relative;
			margin-top: 80rpx;
			padding: 0 30rpx;
			height: 279rpx;
			background: #FFFFFF;
			border: 1px solid #EEEEEE;
			box-shadow: 0rpx 4rpx 27rpx 0rpx rgba(141, 141, 141, 0.14);
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;

				.name {
					.user {
						display: flex;
						align-items: center;
						margin-top: 13rpx;

					}

					p {
						margin-top: 28rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
					}
				}
			}

			.right {
				text {
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FF6054;
				}

				.img {
					display: flex;
					// flex-direction: column;
					align-items: center;
				}
			}
		}

		.type {
			margin-top: 105rpx;
			padding: 0 30rpx;

			.box {
				min-height: 365rpx;
				background: #FFFFFF;
				border: 1px solid #EEEEEE;
				box-shadow: 0rpx 4rpx 27rpx 0rpx rgba(141, 141, 141, 0.14);
				border-radius: 20rpx;
				padding-bottom: 20rpx;

				.fankui {
					margin-top: 20rpx;
					padding: 0 33rpx;

					.fankui-item {
						padding-left: 23rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 155rpx;
						border-bottom: 1rpx solid #eeeeee;

						view {
							h5 {
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #000000;
							}

							.time {
								margin-top: 20rpx;
								font-size: 22rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #999999;
							}
						}

						.see {
							width: 105rpx;
							height: 43rpx;
							background: #FFFFFF;
							border: 1px solid #FF7157;
							border-radius: 22rpx;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #FF7157;
							text-align: center;
							line-height: 43rpx;
						}
					}
				}
			}
		}
	}
</style>